<template>
  <div class="bom_content">
      <Search @getCode = "getCode"/>
      <div class="bom_main clearfix" :style="{height:winH+'px'}">
        <div class="left">
          <Card :bordered="false">
              <BomTree @getTreeDetail = "getTreeDetail" :code = "newCode"/>   
          </Card >
        </div>
        <div class="right">
          <Card :bordered="false" style="height:170px;">
            <BomTreeDetail :aTableData ="aTableData" />   
          </Card>
          <Card :bordered="false" class="bom_tree" :style="{height:(winH-190)+'px'}">
            <BomTreeChlid :code = "selectCode"/>   
          </Card>
        </div>
      </div>
  </div>
</template>

<script>
import winSions from "@/lib/findDimensions";
import BomTree from '../components/bomTree';
import BomTreeChlid from '../components/bomTreeChild';
import BomTreeDetail from '../components/bomTreeDetail';
import Search from '../components/search';
  export default {
    name: "query.index"
    ,title:'BOM物料查询'
    ,data(){
      return {
         code: ''
         ,winH:0
         ,aTableData:[]
         ,newCode:'' //搜索框的code
         ,selectCode:'' //选中tree节点的code
      }
    }
    ,created(){
      let t = this;
      document.title = '产品最新BOM成本查询';
      t.$store.commit('setHeaderTitle',document.title);
    }
    ,mounted(){
      let t = this;
      t.winH = winSions.h - 150;
    }
    ,methods:{
     getTreeDetail(data){
        let t = this;
        if(data.material&&Object.keys(data.material).length){
          let oMaterial = Object.assign({},data.material,{amount:data.amount||0})
          t.aTableData = [oMaterial];
          t.selectCode = data.material.code;
        }else{
          t.aTableData = [];
          t.selectCode = "";
        }
      }
      ,getCode(code){
        let t = this;
        t.newCode = code;
      }
    }
    ,components:{
      BomTree
      ,BomTreeChlid
      ,BomTreeDetail
      ,Search
    }
  }
</script>

<style lang="less">
  .bom_content{
    
    .bom_main{
      margin: 0 20px;
      .left{
        float: left;
        width: 20%;
        height: 100%;
         .ivu-card{
          height: 100%;
          overflow: auto;
        }
      }
      .right{
        width: 79%;
        float: right;
        height: 100%;
        .bom_tree{
          margin-top: 20px;
          overflow-y: auto;
        }
      }
    }
  }
</style>
